<script setup lang="ts">
defineOptions({
  name: 'SlideupTransition'
});

const beforeEnter = (el) => {
  if (!el.dataset) {
    el.dataset = {};
  }
  el.classList.add('collapse-transition');
  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;

  el.style.height = '0';
  el.style.paddingTop = 0;
  el.style.paddingBottom = 0;
};
const enter = (el) => {
  el.dataset.oldOverflow = el.style.overflow;
  if (el.scrollHeight !== 0) {
    // el.style.height = el.scrollHeight + 'px';
    el.style.height = `${el.scrollHeight + 23}px`; // 兼容 card-padding 样式
    el.style.paddingTop = el.dataset.oldPaddingTop;
    el.style.paddingBottom = el.dataset.oldPaddingBottom;
  } else {
    el.style.height = '';
    el.style.paddingTop = el.dataset.oldPaddingTop;
    el.style.paddingBottom = el.dataset.oldPaddingBottom;
  }

  el.style.overflow = 'hidden';
};
const afterEnter = (el) => {
  el.style.height = '';
  el.style.overflow = el.dataset.oldOverflow;
  el.classList.remove('collapse-transition');
};
const beforeLeave = (el) => {
  if (!el.dataset) {
    el.dataset = {};
  }
  el.classList.add('collapse-transition');
  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;
  el.dataset.oldOverflow = el.style.overflow;

  el.style.height = `${el.scrollHeight}px`;
  el.style.overflow = 'hidden';
};
const leave = (el) => {
  if (el.scrollHeight !== 0) {
    // for safari: add class after set height, or it will jump to zero height suddenly, weired
    // $(el).addClass('collapse-transition');
    el.style.height = 0;
    el.style.paddingTop = 0;
    el.style.paddingBottom = 0;
  }
};
const afterLeave = (el) => {
  el.style.height = '';
  el.style.overflow = el.dataset.oldOverflow;
  el.style.paddingTop = el.dataset.oldPaddingTop;
  el.style.paddingBottom = el.dataset.oldPaddingBottom;
  el.classList.remove('collapse-transition');
};
</script>

<template>
  <transition
    name="slideup"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <slot></slot>
  </transition>
</template>

<style lang="less">
.collapse-transition {
  transition:
    0.3s height ease-in-out,
    0.3s padding-top ease-in-out,
    0.3s padding-bottom ease-in-out;
}
</style>
